<template>
  <custom-modal-page :visible.sync="visible">
    <div class="message-push-container">
      <div class="header" header="消息推送">
        <a-button @click="goBack()"> 返回 </a-button>
      </div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :min-width="item.width || 150"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div v-if="item.key == 'pushResult'">
                <span
                  :class="row.pushResult.includes('成功') ? 'success' : 'error'"
                  >{{ row.pushResult }}
                </span>
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import { mesgList } from "@/api/wisdom-beam/quality-app";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getTableData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      columns: [
        {
          title: "节点名称",
          key: "taskNodeDesc",
        },
        {
          title: "推送人员",
          key: "pushUsers",
        },
        {
          title: "推送内容",
          key: "pushComment",
        },
        {
          title: "推送结果",
          key: "pushResult",
        },
      ],
      tableData: [],
      loading: false,
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { id } = this.dataSource;
      return new Promise((resolve, reject) => {
        mesgList({
          page,
          pageSize,
          id,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //返回
    goBack() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.message-push-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .success {
      color: #4bc964;
    }
    .error {
      color: #ff3f4a;
    }
  }
  .pager-container {
    flex-shrink: 0;
  }
}
</style>
